<template>
  <div class="pro-dialog">
    <n-modal
      :id="id"
      :class="{
        'is-full-screen': isFullscreen,
        'full-screen-animation': true,
        'pro-dialog-modal': true
      }"
      :style="{
        width: translateWidth,
        height: translateHeight,
        'max-height': `calc(100vh - ${marginTop} - ${marginBottom})`,
        '--title-bg-color': bgColor,
        '--dialog-shadow': shadowColor
      }"
      preset="dialog"
      :closable="true"
      title="Dialog"
      :on-update:show="handleChangeDialogVisiable"
      v-bind="props.modalProps"
      :autoFocus="false"
      v-model:show="show"
    >
      <!-- 图标 -->
      <template #icon>
        <slot name="icon"></slot>
      </template>

      <!-- 标题 -->
      <template #header>
        <div
          v-if="!$slots.icon && !modalProps?.showIcon"
          class="title-prefix"
        ></div>
        <slot name="header">{{ props?.modalProps?.title || '标题' }}</slot>

        <template v-if="fullscreen">
          <icons
            :class="{
              'header-full-screen-icon': true,
              'dialog-icon-is-dark': isDark
            }"
            :name="isFullscreen ? 'i-off-screen' : 'i-full-screen'"
            @click="toggle"
            :fill="
              isDark ? 'rgba(255, 255, 255, 0.52)' : 'rgba(102, 102, 102, 1)'
            "
          />
        </template>
      </template>

      <!-- 内容 -->
      <div
        class="content"
        :style="{
          overflow: 'hidden',
          'padding-right': '5px',
          ...contentStyle
        }"
      >
        <n-spin size="small" :show="loading">
          <slot>
            <div style="height: 500px">内容</div>
          </slot>
        </n-spin>
      </div>
      <!-- 底部按钮 -->
      <template #action v-if="showButton">
        <slot name="footer">
          <div class="footer-button">
            <n-space>
              <pro-icon-button
                name="close"
                :buttonProps="{ size: 'medium', secondary: true }"
                :iconProps="{ themeReverse: false }"
                :text="cancelButtonText"
                @click="handleButtonClick(false)"
              />

              <pro-icon-button
                v-if="showConfirmButton"
                name="check"
                :buttonProps="{
                  size: 'medium',
                  type: 'primary',
                  loading: buttonLoading
                }"
                :text="confirmButtonText"
                @click="handleButtonClick(true)"
              />
            </n-space>
          </div>
        </slot>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup name="proDialog">
  import type { ModalProps as ModalPropsType } from 'naive-ui'
  import { useProDialog } from './hooks/useProDialog'

  interface PropsType {
    // 是否显示dialog
    showDialog: ModalPropsType['show']
    // naive-ui的dialog所有属性
    //@Warn: show属性已经抽出来了
    modalProps?: ModalPropsType
    // 是否可以拖拽
    drag?: boolean
    // 手动提供唯一id
    id?: string
    // 是否显示全屏按钮
    fullscreen?: boolean
    // 是否显示底部按钮
    showButton?: boolean
    // 是否显示确认按钮
    showConfirmButton?: boolean
    // 取消按钮文字
    cancelButtonText?: string
    // 确认按钮文字
    confirmButtonText?: string
    // 内容loading状态
    loading?: boolean
    // 按钮loading状态
    buttonLoading?: boolean
    // 高度撑开 上边框外边距
    // @Warn: 注意如果设置了height属性后高度撑开无效
    top?: number | string
    // 下边框外边距
    bottom?: number | string
    //  弹窗宽度
    width?: number | string
    // 弹窗高度
    height?: number | string
    contentStyle?: object
  }

  const props = withDefaults(defineProps<PropsType>(), {
    drag: true,
    fullscreen: false,
    showButton: true,
    showConfirmButton: true,
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    loading: false,
    buttonLoading: false,
    top: '50px',
    bottom: '50px'
  })

  const emits = defineEmits([
    'update: modalProps',
    'handleCancel',
    'handleConfirm',
    'dialogVisiableChange',
    'update:showDialog',
    'afterClosed'
  ])

  const {
    id,
    isDark,
    isFullscreen,
    marginTop,
    marginBottom,
    show,
    translateWidth,
    translateHeight,
    toggle,
    bgColor,
    shadowColor,
    handleChangeDialogVisiable,
    handleButtonClick
  } = useProDialog(props, emits)
</script>

<style lang="less" scoped>
  .title-prefix {
    width: 5px;
    height: 18px;
    margin-right: 5px;
    background: var(--primary-color);
  }
</style>
<style lang="less">
  // 弹窗全局样式
  .pro-dialog-modal {
    padding: 0 !important;
    padding-top: 16px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
    overflow: auto;
    box-shadow: 0px 2px 5px 1px var(--dialog-shadow);
    border: 1px solid var(--primary-color);
    max-width: 100vw !important;
    .n-dialog__close {
      // margin: 20px 26px 0 0;
    }
    .n-dialog__title {
      padding: 16px 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #e8e7e7;
      color: var(--primary-color);
      background-color: var(--title-bg-color);
    }
    .n-dialog__content {
      padding: 8px 28px;
      margin: 0 !important;
    }
    .n-dialog__action {
      padding: 10px 28px;
      border-top: 1px solid #e8e7e7;
    }
  }
</style>
